<template lang="">
    <div class="add-clasify"> 
      <el-row>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
             <el-tree
              :data="dataTree"
              :props="defaultProps"
              node-key="id"
              accordion
              :default-expanded-keys="[2, 3]"
              :expand-on-click-node="false"
              @node-contextmenu="rightClick"
              :highlight-current="true"
              @node-click="handleNodeClick"
            ></el-tree>
      
            <div v-show="menuVisible">
              <ul id="menu" class="menu">
                <li class="menu__item" @click="addClasifyFunc">添加子类</li>
                <li class="menu__item" @click="changeClasifyFunc">修改分类</li>
                <li class="menu__item" @click="deleteCard">删除分类</li>
                <li class="menu__item" @click="moveCard">分类迁移</li>
              </ul>
            </div> 
        </el-col>
        <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
                   <div class="add-clasify-right">
        <h2>添加分类:</h2>
        <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="上级目录">
    <el-input v-model="form.name" disabled></el-input>
  </el-form-item>
  <el-form-item label="分类名称">
    <el-input v-model="form.ifyname"></el-input>
  </el-form-item>
   <el-form-item label="备注">
    <el-input v-model="form.note"></el-input>
  </el-form-item>
    <el-form-item label="排序">
    <el-input v-model="form.order"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">保存</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</div> 
        </el-col>
      </el-row>

    </div>
</template>
<script>
export default {
  data() {
    return {
        menuVisible: false, //模态框
      form: {
        name: "武器",
        ifyname: "",
        note: "",
        order: "",
      },
        dataTree: [
          {
            id: 1,
            label: "战略",
            children: [
              {
                id: 4,
                label: "战略 1-1"
              }
            ]
          },
          {
            id: 2,
            label: "战术",
            children: [
              {
                id: 5,
                label: "战术 2-1"
              },
              {
                id: 6,
                label: "战术 2-2"
              }
            ]
          },
          {
            id: 3,
            label: "武器 3",
            children: [
              {
                id: 7,
                label: "武器 3-1"
              },
              {
                id: 8,
                label: "二级 3-2"
              }
            ]
          },
          {
            id: 4,
            label: "情报 3",
            children: [
              {
                id: 7,
                label: "情报 3-1"
              },
              {
                id: 8,
                label: "情报 3-2"
              }
            ]
          }
        ],
        defaultProps: {
          children: "children",
          label: "label"
        }
      
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
      handleNodeClick() {},
    rightClick(MouseEvent, object, Node, element) {
      // 鼠标右击触发事件
      this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector("#menu");
      menu.style.left = MouseEvent.clientX -220 + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      menu.style.top = MouseEvent.clientY - 90 + "px";
      console.log("右键被点击的event:", MouseEvent);
      console.log("右键被点击的object:", object);
      console.log("右键被点击的value:", Node);
      console.log("右键被点击的element:", element);
      console.log("鼠标点击了树形结构图");
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
      //添加分类
    addClasifyFunc(){
            this.$router.push('add-claify')
    },
    //修改分类
    changeClasifyFunc(){
            this.$router.push('change-claify')
    },
    //分类迁移
      moveCard() {},
      //删除分类/
    deleteCard() {
         var _this = this;
         _this.open() ;
    },
  //打开i弹窗
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
  }
};
</script>
<style scoped>
h2 {
  padding: 15px;
}
.menu__item {
  display: block;
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
}
.menu {
  height: 130px;
  width: 100px;
  position: absolute;
  border-radius: 10px;
  border: 1px solid #999999;
  background-color: #f4f4f4;
}
li:hover {
  background-color: #1790ff;
  color: white;
}
</style>